<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> C4Penguin </title>
	<style>
		body {
			/* IE10 Consumer Preview */
			background-image: -ms-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* Mozilla Firefox */
			background-image: -moz-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* Opera */
			background-image: -o-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* Webkit (Safari/Chrome 10) */
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #012F50), color-stop(1, #0F75A5));
			/* Webkit (Chrome 11+) */
			background-image: -webkit-linear-gradient(top, #012F50 0%, #0F75A5 100%);
			/* W3C Markup, IE10 Release Preview */
			background-image: linear-gradient(to bottom, #012F50 0%, #0F75A5 100%);
			/* IE7-8-9 */
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#012F50', endColorstr='#0F75A5');
			margin: 0;
		}

		canvas {
			padding-left: 0;
			padding-right: 0;
			margin: 0px auto;
			display: block;
		}
	</style>
</head>

<body>
	<script>
		// Setup canvas variable
		var SAVE_SPACE = 16;
		var CANVAS_W = 1280;
		var CANVAS_H = 720;
		
		var g_windowW = 0;
		var g_windowH = 0;
		
		var g_canvasW = CANVAS_W;
		var g_canvasH = CANVAS_H;
		var g_canvasScale = 1;
		var g_touchScale = 1;
		
		// Create the canvas
		var g_canvas = document.createElement("canvas");
		var g_context = g_canvas.getContext("2d");
		g_canvas.width  = CANVAS_W;
		g_canvas.height = CANVAS_H;
		document.body.appendChild (g_canvas);
		
		// Catch input event
		var g_originMouseX = 0;
		var g_originMouseY = 0;
		var g_lastTouchX = 0;
		var g_lastTouchY = 0;
		
		function ComputeMouseOrigin () {
			var temp = g_canvas;
			var windowOffsetX = 0;
			var windowOffsetY = 0;
			while (temp.tagName != 'BODY') {
				windowOffsetY += temp.offsetTop;
				windowOffsetX += temp.offsetLeft;
				temp = temp.offsetParent;
			}
			
			g_originMouseX = window.pageXOffset - windowOffsetX;
			g_originMouseY = window.pageYOffset - windowOffsetY;
		}
		
		// Resize the canvas depend on broswer size
		function ResizeCanvas () {
			// Detect screen width and height
			if (window.innerWidth) g_windowW = window.innerWidth;
			else if (document.documentElement && document.documentElement.clientWidth) g_windowW = document.documentElement.clientWidth;
			else if (document.body)	g_windowW = document.body.clientWidth;
			
			g_windowW -= SAVE_SPACE;
			
			if (window.innerHeight) g_windowH = window.innerHeight;
			else if (document.documentElement && document.documentElement.clientHeight) g_windowH = document.documentElement.clientHeight;
			else if (document.body) g_windowH = document.body.clientHeight;
			
			g_windowH -= SAVE_SPACE;
			
			// Resize canvas accordingly
			g_canvasH = (g_windowH < g_windowW * (CANVAS_H / CANVAS_W))? g_windowH : ((g_windowW * (CANVAS_H / CANVAS_W) + 0.5) >> 0);
			g_canvasW = (g_canvasH * (CANVAS_W / CANVAS_H) + 0.5) >> 0;
			g_canvasScale = g_canvasW / CANVAS_W;
			g_touchScale = 1 / g_canvasScale;
			
			
			g_canvas.style.width  = g_canvasW + "px";
			g_canvas.style.height = g_canvasH + "px";

			ComputeMouseOrigin();
		}
		
		// Resize once at start
		ResizeCanvas();
		//window.onresize = ResizeCanvas;
		
		
	</script>
	
	
	<!-- LOCALIZATION -->
	<script src="Source/Localization_EN.js">                                  </script>
	
	<!--    ENGINE    -->
	<script src="Source/Engine/Graphic/SourceRect.js">                        </script>
	<script src="Source/Engine/Graphic/GraphicEngine.js">                     </script>
	
	<!--   UI OBJECT  -->
	<script src="Source/UIObject/Button.js">                                  </script>
	
	<!--     STATE    -->
	<script src="Source/State/GSSplash.js">                                   </script>
	<script src="Source/State/GSLoading.js">                                  </script>
	<script src="Source/State/GSMainMenu.js">                                 </script>
	<script src="Source/State/GSGamePlay.js">                                 </script>
	
	<!-- ACTION PHASE -->
	<script src="Source/ActionPhase/Explosion.js">                            </script>
	<script src="Source/ActionPhase/Bomb.js">                                 </script>
	<script src="Source/ActionPhase/Penguin.js">                              </script>
	<script src="Source/ActionPhase/Entity.js">                               </script>
	<script src="Source/ActionPhase/Map.js">                                  </script>
	<script src="Source/ActionPhase/Battle.js">                               </script>
	
	<script src="Source/ActionPhase/PathFinder.js">                           </script>
	
	
	<!--    ENEMY     -->
	<script src="Source/ActionPhase/Enemy/Harvester.js">                      </script>
	
	
	
	<script>
		// Register the main loop here
		window.requestAnimFrame = (function () {
			return  window.requestAnimationFrame       || 
					window.webkitRequestAnimationFrame || 
					window.mozRequestAnimationFrame    || 
					window.oRequestAnimationFrame      || 
					window.msRequestAnimationFrame     || 
					function (callback) {
						window.setTimeout(callback, 16);
					};
			}
		)();
		
		var g_deltaTime = 0;
		var g_lastTime = new Date();
		var g_curTime  = new Date();
		
		var MainLoop = function () {
			g_curTime = new Date();
			g_deltaTime = g_curTime - g_lastTime;
			
			UpdateState();
			
			g_lastTime = g_curTime;
			requestAnimFrame (MainLoop);
		}
		
		var InitApp = function () {
			MainLoop();
		}
		
		
		
		
		// And here is the main loop, and also the state machine
		// The state we will have
		var g_currentState;
		var g_futureState;
		

		// This is for fade-in, fade-out
		var FADE_DURATION = 1000;
		var g_fadeAlpha = 0;
		var g_fadeStep = 0;
		
		// State declaration
		var g_gsSplash = new GSSplash();
		var g_gsLoading = new GSLoading();
		var g_gsMainMenu = new GSMainMenu();
		var g_gsGamePlay = new GSGamePlay();
		
		// Init the splash state
		g_gsSplash.Init();
		
		SwitchState (g_gsSplash, false);
		
		
		// The main loop of the game, update the state
		function UpdateState () {
			g_currentState.Update();
			g_currentState.Draw();
			
			UpdateFade();
		}
		
		// Switch to a new state
		function SwitchState (state, fade) {
			if (fade == false || fade == null) {
				g_currentState = state;
				g_currentState.OnSwitch();
			}
			else {
				if (g_fadeStep == 0) {
					g_futureState = state;
					g_fadeAlpha = 0;
					g_fadeStep = 1;
				}
			}
		}
		
		
		function UpdateFade () {
			if (g_fadeStep == 1) {
				g_fadeAlpha += g_deltaTime;
				if (g_fadeAlpha >= FADE_DURATION) {
					g_fadeStep = 2;
					g_currentState = g_futureState;
					g_currentState.OnSwitch();
				}
			}
			else if (g_fadeStep == 2) {
				g_fadeAlpha -= g_deltaTime;
				if (g_fadeAlpha <= 0) {
					g_fadeStep = 0;
				}
			}
			
			if (g_fadeAlpha > 0) {
				g_graphicEngine.FillCanvas (g_context, 255, 255, 255, g_fadeAlpha * 0.001);
			}
		}
		
		
		
		
		
		
				
		function OnMouseMove (event) {
			var x = (g_originMouseX + event.clientX) * g_touchScale;
			var y = (g_originMouseY + event.clientY) * g_touchScale;
			g_currentState.OnMouseMove (x, y);
		}
		function OnMouseDown (event) {
			var x = (g_originMouseX + event.clientX) * g_touchScale;
			var y = (g_originMouseY + event.clientY) * g_touchScale;
			g_currentState.OnMouseDown (x, y);
		}
		function OnMouseUp (event) {
			var x = (g_originMouseX + event.clientX) * g_touchScale;
			var y = (g_originMouseY + event.clientY) * g_touchScale;
			g_currentState.OnMouseUp (x, y);
		}
		
		
		g_canvas.addEventListener('mousemove', OnMouseMove, false);
		g_canvas.addEventListener('mousedown', OnMouseDown, false);
		g_canvas.addEventListener('mouseup',   OnMouseUp, false);
		
		
		
		function GetTouch(event) {
			var touches = ( typeof( event.touches ) != "undefined" ) ? event.touches : event.changedTouches;
			return touches[0];
		}	
		
		function OnTouchStart (event) {
			var touch = GetTouch(event);	
			g_lastTouchX = (g_originMouseX + touch.pageX) * g_touchScale;
			g_lastTouchY = (g_originMouseY + touch.pageY) * g_touchScale;
			
			g_currentState.OnMouseDown (g_lastTouchX, g_lastTouchY);
		}
		function OnTouchEnd (event) {
			g_currentState.OnMouseUp (g_lastTouchX, g_lastTouchY);
		}
		function OnTouchMove (event) {
			var touch = GetTouch(event);	
			var x = (g_originMouseX + touch.pageX) * g_touchScale;
			var y = (g_originMouseY + touch.pageY) * g_touchScale;
			
			g_currentState.OnMouseMove (x, y);
		}
		
		g_canvas.ontouchstart = OnTouchStart;
		g_canvas.ontouchend = OnTouchEnd;
		g_canvas.ontouchmove = OnTouchMove;	
		
		
		
		
		
		function OnKeyDown (event) {
			var keycode = event.which;
			g_currentState.OnKeyDown (keycode);
		}
		function OnKeyUp (event) {
			var keycode = event.which;
			g_currentState.OnKeyUp (keycode);
		}
		
		
		
		window.onkeydown  = OnKeyDown;
		window.onkeyup    = OnKeyUp;
		
		
		InitApp();
	</script>
</body>
